<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>
    <!-- <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> -->
    <script src="assets/js/vue.js"></script>
    <script src="assets/js/axios.js"></script>
    <link rel="stylesheet" href="assets/css/element.css">

    <!-- 引入组件库 -->
    <script src="assets/js/element.js"></script>
    <!-- Required CSS files -->
    <link href="assets/css/fonts.css" rel="stylesheet">


    <link rel="stylesheet" href="assets/css/owl.carousel.css">
    <link rel="stylesheet" href="assets/css/mycss.css">
    <link rel="stylesheet" href="assets/css/barfiller.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.css">
    <link rel="stylesheet" href="assets/css/main.css">
</head>

<body>
    <div id="app">
                <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
            <el-form :model="form" style="text-align: left;">
                <el-form-item label="新密码：" :label-width="formLabelWidth">
                    <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="再次输入新密码：" :label-width="formLabelWidth">
                    <el-input v-model="rePassword" type="password" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="modify()">确 定</el-button>
            </div>
        </el-dialog>
        <div class="preloader">
            <span class="preloader-spin"></span>
        </div>
        <div class="site">
            <header>
                <div class="container">
                    <div class="row">
                        <div class="col-6 col-sm-3 logo-column">
                            <a href="index.html" class="logo" style="color:#fff;font-size:22px">
                                <img src="assets/img/logo.png" alt="logo">&nbsp电脑DIY技术分享
                            </a>
                        </div>
                        <div class="col-6 col-sm-9 nav-column clearfix">
                            <div class="right-nav">
                                <span class="search-icon fa fa-search"></span>
                                <form action="" class="search-form" @submit.prevent="checkForm">
                                    <input v-model="s" type="search" placeholder="请输入关键字">
                                    <button type="submit"><i class="fa fa-search"></i></button>
                                </form>
                            </div>
                            <nav id="menu" class="d-none d-lg-block">
                                <ul>
                                    <li><a style="cursor:pointer;color:#acbbce" @click="pub">发帖</a></li>

                                    <li v-if="userInfo.name" class="has-child">
                                        <a href="mine.html">
                                            <img :src="userInfo.headImg"
                                                style="width:30px;height:30px;border-radius:50%" alt="">
                                            {{userInfo.name}}</a>
                                        <ul class="sub-menu" style="z-index: 1000">
                                            <li><a @click="logout">注销</a></li>
                                            <li><a @click="dialogFormVisible = true">修改密码</a></li>
                                        </ul>
                                    </li>
                                    <li v-else><a style="cursor:pointer;color:#acbbce" @click="toLogin">登录</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </header>
            <el-carousel :interval="4000" type="card" height="400px" style="width:90%;margin:0 auto">
                <el-carousel-item v-for="img in imgList">
                    <el-row>
                        <el-col :span="16">
                            <div @click="toDetail(img[0].src)">
                                <img :src="img[0].configValue" style="width:100%;height:400px;" alt="portfolio-image">
                                <div class="card-text-attach text-control">{{img[0].description}}</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <el-col :span="24" style="height:200px;padding: 0 5px 5px 5px">
                                <div @click="toDetail(img[1].src)">

                                    <img style="width:100%;height: 200px" :src="img[1].configValue" alt="">
                                    <div class="card-text-attach text-control">{{img[1].description}}</div>
                                </div>
                            </el-col>
                            <el-col :span="24" style="height:200px;padding: 0 5px 0 5px">
                                <div @click="toDetail(img[2].src)">
                                    <img style="width:100%;height:200px" :src="img[2].configValue" alt="">
                                    <div class="card-text-attach text-control">{{img[2].description}}</div>
                                </div>

                            </el-col>
                        </el-col>
                    </el-row>




                </el-carousel-item>
            </el-carousel>
            <div class="container text-center">

                <div class="portfolio-area sp">
                    <div class="container">
                        <el-divider></el-divider>
                        <!-- 板块部分 -->
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span style="float:left;font-size:22px;color:#e2761c"><b>DIY大杂烩</b></span>
                            </div>
                            <div class="text item ">
                                <el-row class="row-bg" justify="space-between">
                                    <el-col :span="8" v-for="o in list" :key="o.moduleId">
                                        <div class="grid-content bg-purple" v-if="o.parent_id==1">
                                            <el-card class="box-card-little elcard">
                                                <el-row>
                                                    <div @click="toModel(o.moduleId)">
                                                        <el-col :span="7">
                                                            <img :src="o.img" @click="toModel(o.moduleId)"
                                                                style="border-radius:10px;width:200px;height:100px;float:left"
                                                                alt="">
                                                        </el-col>
                                                        <el-col :span="17">
                                                            <div style="float:left;padding-left: 10px">
                                                                <p><a @click="toModel(o.moduleId)">{{o.NAME}}</a> </p>
                                                                <p>主题数：{{o.num}}&nbsp帖子数：{{o.num}}</p>
                                                                <p class="text-control">最新发表：<a style="cursor:pointer" @click="toIdetail(o.newest[0].id,o.moduleId)" >{{o.newest[0].title}}</a>
                                                                </p>
                                                            </div>
                                                    </div>
                                                </el-row>
                                            </el-card>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-card>
                    </div>
                </div>

                <div class="portfolio-area sp">
                    <div class="container">
                        <el-divider></el-divider>
                        <!-- 板块部分 -->
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span style="float:left;font-size:22px;color:#e2761c"><b>技术交流区</b></span>
                            </div>
                            <div class="text item ">
                                <el-row class="row-bg" justify="space-between">
                                    <el-col :span="8" v-for="o in list" :key="o.moduleId">
                                        <div class="grid-content bg-purple" v-if="o.parent_id==2">
                                            <el-card class="box-card-little elcard">
                                                <el-row>
                                                    <div @click="toModel(o.moduleId)">
                                                        <el-col :span="7">
                                                            <img :src="o.img" @click="toModel(o.moduleId)"
                                                                style="border-radius:10px;width:200px;height:100px;float:left"
                                                                alt="">
                                                        </el-col>
                                                        <el-col :span="17">
                                                            <div style="float:left;padding-left: 10px">
                                                                <p><a @click="toModel(o.moduleId)">{{o.NAME}}</a> </p>
                                                                <p>主题数：{{o.num}}&nbsp帖子数：{{o.num}}</p>
                                                                <p class="text-control">最新发表：<a style="cursor:pointer" @click="toIdetail(o.newest[0].id,o.moduleId)" >{{o.newest[0].title}}</a>
                                                                </p>
                                                            </div>
                                                    </div>
                                                </el-row>
                                            </el-card>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-card>
                    </div>
                </div>

                <el-divider></el-divider>
                <div class="row">
                    <ul class="isotope-menu">

                        <li data-filter="*" class="active">
                            <h2>站长良心推荐</h2>
                        </li>
                    </ul>
                </div>
                <div class="row portfolio-isotop" style="background:#fff">

                    <!-- CPU、内存、主板  -->
                    <div v-for="o in otherList" class="single-portfolio col-md-4 ceramics">
                        <div class="inner">
                            <div class="portfolio-img">
                                <img :src="o.img" style="width:100%;height:220px;" alt="portfolio-image">
                                <div class="hover-content">
                                    <div>
                                        <a :href="o.hrefto" class="button">查看详情</a>
                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-content">
                                <a href="#">
                                    <h3>{{o.price}}</h3>
                                </a>
                                <span>{{o.title}}</span>
                            </div>
                        </div>
                    </div>
                    <!-- CPU、内存、主板  end-->


                </div>
                <!-- 板块部分 -->

                <!-- 板块部分 -->
                <!-- <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="float:left;font-size:22px;color:#e2761c"><b>产品技术讨论区</b></span>
                    </div>
                    <div class="text item">
                        <el-row class="row-bg" justify="space-between">
                            <el-col :span="8" v-for="o in list" :key="o.moduleId">
                                <div class="grid-content bg-purple">
                                    <el-card class="box-card-little elcard">
                                        <el-row>
                                            <div @click="toModel(o.moduleId)">
                                                <el-col :span="7">
                                                    <img :src="o.img"
                                                        style="border-radius:10px;width:200px;height:100px;float:left"
                                                        alt="">
                                                </el-col>
                                                <el-col :span="17">
                                                    <div style="float:left;padding-left: 10px">
                                                        <p>{{o.NAME}}</p>
                                                        <p>主题数：{{o.num}}&nbsp帖子数：{{o.num}}</p>
                                                        <p>最新发表：{{o.newest.title}}</p>
                                                    </div>
                                            </div>
                                        </el-row>
                                    </el-card>
                                </div>
                            </el-col>
                        </el-row>
                </el-card> -->
            </div>

        </div>
        </el-card>
        <!-- 板块部分 -->



   
    </div>
    </div>



    </div>
    <footer>
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-lg-3 footer_widget">
                        <div class="inner">
                            <h4>友情链接</h4>
                            <p>
                                <ul>
                                    <li><a target="_blank"
                                            href="http://page.china.alibaba.com/buy/trade/7.html">阿里巴巴数码</a>
                                    </li>
                                    <li><a target="_blank" href="http://zone.it.sohu.com/">搜狐数码</a></li>
                                    </li>
                                    </li>
                                    <li><a target="_blank" href="//bbs.pchouse.com.cn">太平洋家居网论坛</a></li>
                                    <li><a target="_blank" href="http://fans.tcl.com/portal.php">铁粉社区(TCL)</a>
                                    </li>
                                    <li><a target="_blank" href="http://bbs.coocaa.com/">酷开社区</a></li>
                                </ul>
                            </p>

                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 footer_widget">
                        <div class="inner">
                            <ul>
                                <li><a target="_blank" href="http://bbs.mumayi.com/">安卓论坛</a></li>
                                <li><a target="_blank" href="//product.pconline.com.cn/itbk/">IT百科</a></li>
                                <li><a target="_blank" href="//dl.pconline.com.cn/android/">太平洋手机软件</a></li>
                                <li><a target="_blank"
                                        href="https://product.pconline.com.cn/mobile/apple/1123572.html">iPhone
                                        XR</a>
                                </li>
                                <li><a target="_blank" href="http://bbs.yunos.com">云OS社区</a></li>
                                <li><a target="_blank" href="http://bbs.elecfans.com">电子技术论坛</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="copyright-txt">
                            Copyright &copy; 2019.郑州大学北校区 All rights reserved.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    </div>
    </div>

    <!--Required JS files-->
    <script src="assets/js/jquery-2.2.4.min.js"></script>
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>
    <script src="assets/js/vendor/owl.carousel.min.js"></script>
    <script src="assets/js/vendor/isotope.pkgd.min.js"></script>
    <script src="assets/js/vendor/jquery.barfiller.js"></script>
    <script src="assets/js/vendor/loopcounter.js"></script>
    <script src="assets/js/vendor/slicknav.min.js"></script>
    <script src="assets/js/active.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                s: '',
                seen: true,
                list: [],
                otherList: [],
                imgList: [],
                imgs: ['https://s2.ax1x.com/2019/05/06/EBRZqK.jpg', 'https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1807/17/c19/97712070_1531817630825_1024x1024.jpg', 'https://img.pconline.com.cn/images/upload/upc/tx/photoblog/1706/04/c1/48918899_1496520194383_mthumb.jpg'],
                userInfo: '',
                formLabelWidth: '140px',
                form: {
                    password: ''
                },
                dialogFormVisible: false,
                rePassword: '',

            },
            methods: {
                toIdetail(id,mid){
                    location.href=(`detail.html?id=${id}&mid=${mid}`)
                },
                modify() {
                    if(this.form.password!=this.rePassword){
                        this.$message.error('两次输入的密码不一致，请重新输入')
                        return false
                    }
                    axios({
                        method: 'PUT',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        url: `http://127.0.0.1:888/member/password?password=${this.form.password}`,
                    }).then((re) => {
                        console.log('re', re)
                        if (re.data.code === 2) {
                            this.$message({
                                message: '修改成功，请重新登录',
                                type: 'success'
                            });
                            setTimeout('location.href=("login.html")', 1000)

                        }
                        else if (re.data.code === 1) {
                            this.$message.error('登录超时')
                        } else {
                            this.$message.error(re.data.content)
                        }
                    })
                },
                pub() {
                    
                    let _this = this
                    console.log('userInfo',_this.$data.userInfo,_this.$data.userInfo=='')
                    if (_this.$data.userInfo == '') {
                        _this.$message.error("请先登录！")
                        return false
                    }
                    location.href = ("publish.html")

                },
                checkForm(param) {
                    let _this = this
                    let searchUrl = encodeURI(`list.html?s=${_this.$data.s}`);   //使用encodeURI编码
                    let code = escape(_this.$data.s)
                    location.href = (`list.html?s=${code}&id=3`)
                },
                toLogin() {
                    location.href = (`login.html?backUrl=${escape(document.location.pathname + document.location.search)}`)
                },
                checkForm(param) {
                    let _this = this
                    let searchUrl = encodeURI(`list.html?s=${_this.$data.s}`);   //使用encodeURI编码
                    let code = escape(_this.$data.s)
                    location.href = (`list.html?s=${code}&id=3`)
                },
                toDetail(src) {
                    location.href = (`${src}`)
                },
                toModel(id) {
                    location.href = (`list.html?id=${id}`)
                },
          
                logout() {
                    axios({
                        method: 'get',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        url: 'http://127.0.0.1:888/member/out',
                    }).then((re) => {
                        console.log('re', re)
                        if (re.data.code === 0) {
                            this.$message({
                                message: '注销成功',
                                type: 'success'
                            });
                            sessionStorage.removeItem('userInfo')
                            setTimeout('location.href=("index.html")', 500)

                        }
                    })
                },
                getList(param) {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    let _this = this
                    axios.defaults.headers.post['Content-Type'] = "application/x-www-form-urlencoded"
                    axios.defaults.headers.token = sessionStorage.getItem('token')
                    axios.all([
                        axios.get(`http://127.0.0.1:888/module/list`),
                        axios.get(`http://127.0.0.1:888/other/list`),
                        axios.get(`http://127.0.0.1:888/config/listIndexImg`)
                    ]).then(axios.spread(function (ires, cres, jres) {
                        console.log('ires', ires.data)
                        if (ires.data.code === 0) {
                            _this.$data.list = ires.data.content
                        }
                        if (cres.data.code === 0) {
                            _this.$data.otherList = cres.data.content
                            loading.close()
                        }
                        if (jres.data.code === 0) {

                            let item = []

                            _this.$data.imgList = jres.data.content
                            let _imgList = []
                            let j = 0
                            for (i in _this.$data.imgList) {
                                if ((i + 1) % 3 == 0) {
                                    for (j = i - 2; j <= i; j++) {
                                        item.push(_this.$data.imgList[j])
                                    }
                                    _imgList.push(item)
                                    item = []
                                }
                            }
                            _this.$data.imgList = _imgList
                            console.log('detail',_imgList)
                            loading.close()
                        }
                    }));

                },
            },

            created: function (p) {
                let _this = this
                let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
                console.log('user', userInfo)
                if (userInfo != null) {
                    this.$data.userInfo = userInfo
                }
                _this.getList()

            }
        })


    </script>
</body>

</html>